<template>
    <div class="slideBar">
        <ul class="oul">
            <li  v-for='(item,index) of datalist'  :key='index' @click='oclick(item,index)'>
                {{item}} 
             </li>

        </ul>
    </div>
</template>

<script>
export default {
  data(){
    return{
      sindex:0
    }
  },
  props: {
    datalist: {
      type: Array
    },
    scolli:{
      type:Number,
      default:0
    }
  },
  methods: {
    getDom(){
       let arr = document.getElementsByClassName("oul")[0].childNodes;
 
      for (let i = 0; i < arr.length; i++) {
        arr[i].className = "";
         console.log(this.scolli)
        if (i === this.scolli) {
          arr[i].className = "active";
        //   console.log(arr[i]);
        }
        
      }
    },
    oclick(item,index) {
       this.getDom()

      console.log(index);
       let arr = document.getElementsByClassName("routeDiv")[0];
 
       arr.scrollTo(0,(index*500));
   
    }
  },

  watch:{
    scolli(){
      
      this.getDom();
        
    },
    oclick(){
      this.getDom();

    }
  }
};
</script>

<style lang='scss' scoped>
$appwidth: 375;

@function pxtovw($p) {
  @return (100 / $appwidth * $p) * 1vw;
}

.slideBar {
  padding-top: pxtovw(40);
  // padding-bottom: pxtovw(50);
  // height: 100%;

  overflow: auto;
  ul {
    position: fixed;
    height: pxtovw(750);
    border-right: 1px solid #ccc;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    li {
      text-align: center;
   
        font-size: pxtovw(14);
        color: #333;
    
     
    }
  }
 .active {
        font-size: pxtovw(16);
        color: orange;
      }
}
</style>
